<template>
    <div class="oldlist-box" >
        <div class="oldtime" >
            <div class="time">{{Oldtime|month}} 月 {{Oldtime|day}} 日</div>
            <div class="line"></div>

        </div>
        
        <div class="olditem" v-for="item in data.stories" :key="item.id" @click="viewDetails(item.id)" >
           
            <div class="oldsleft" >
                <div class="oldText"> {{item.title}}</div>
                <div class="oldAuthor">{{item.hint}}</div>
            </div>
                <div class="oldright"><img :src="item.images" alt=""></div>
        </div>
        

    </div>
</template>

<script>
    export default {
        name:'Oldlist',
        data() {
    return {
      
      Oldtime:[],
      
      
        };
    },

    filters:{

             month(val){
                 
                return val.slice(-4,-2);
                
        },
            day(val){
                return val.slice(-2) ;
            }
        },
    props:['data'],

    components:{

    },

    created() {
      this.getLastest();
        this.Oldtime = this.data.date
      
    },


    methods: {
        // 获取最新的日报内容
      getLastest(){
            this.axios({
                // 请求类型
                method:'get',
                // 请求路径  最新日报
                 url: 'https://apis.netstart.cn/zhihudaily/stories/latest',

                

            }).then(result =>{
                
                //  this.Oldlist = result.data.stories;
                this.lastTime= result.data.date;
                
                
            }).catch(err =>{
                
            })
        },

        viewDetails(id){
           
            this.$router.push({name: 'Details', params: {id}});
        },


        // getOld(){
                    

        //    this.axios({
        //         // 请求类型
        //         method:'get',
        //         // 请求路径  最新日报
        //          url: 'https://apis.netstart.cn/zhihudaily/stories/before/'+this.lastTime,

                

        //     }).then(result =>{
                
        //         this.Oldtime = result.data.stories;
                
                
                
        //     }).catch(err =>{
        //        
        //     })

            

        // },

    


  },


}
</script>

<style lang="less" scoped>
    .oldlist-box{
        margin: 0;
    }

    .oldtime{
       display: flex;
       justify-content: space-between;
       align-items: center;
    }

    .line{
        width: 100%;
        border-top: 1px solid black;
        
    }
    
    .time{
        width: 110px;
        font-size: 16px;
        margin-left: 15px;
    }

    .olditem{
        height: 100px;
        padding: 10px 15px ;
       
        display: flex;
        justify-content: space-between;
        align-items: center;
        
    }
    .oldleft{
    
        height: 100%;
    }

    .oldText{
        width: 260px; 
        
        font-size: 18px;
        
        text-overflow: ellipsis;
            display: -webkit-box; 
            -webkit-box-orient: vertical; 
            -webkit-line-clamp: 2; 
            overflow: hidden;
    }
    .oldAuthor{
        height: 20px;
        font-size: 14px;
        margin-top: 5px;
    }

    .oldright{
        width: 80px;
        height: 80px;
        background-color: cadetblue;
    }

    img{
        width: 100%;
        height: 100%;
    }
    

</style>